<template>
  <div class="news-detail">
    <div class="news-wrap">
      <p class="title">{{ newsDetail && newsDetail.title }}</p>
      <div class="info">
        <p class="time">{{ newsDetail && newsDetail.date }}</p>
      </div>
      <!-- <div class="news-cont">
        <img :src="newsDetail && newsDetail.pic">
        <p>{{ newsDetail && newsDetail.content }}</p>
      </div> -->
      <div class="txt-center">
        <img :src="newsDetail && newsDetail.pic" class="news-img">
      </div>
      <div class="news-cont" v-html="newsDetail &&　newsDetail.content"></div>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
export default {
  name: 'ActivityDetail',
  data () {
    return {
      newsId: null,
      newsDetail: null
    }
  },
  created () {
    this.newsId = this.$route.params.id
    this.getNewsDetail(this.newsId)
  },
  methods: {
    getNewsDetail () {
      let that = this
      Api.getNewsDetail({id: that.newsId}).then(res => {
        if (res.code === 20000) {
          that.newsDetail = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.news-wrap{
  position: relative;
  z-index: 10;
  width: 90%;
  margin: 0 auto;
  padding: .533333rem 0 .266667rem;
}
.news-wrap .title{
  font-size: 18px;
  margin-bottom:.266667rem;
  text-align: center;
}
.news-wrap .info{
  text-align: left;
}
.news-wrap .time,
.news-wrap .org{
  font-size: 12px;
  color:#8a8a8f;
  text-align: center;
  margin-bottom: .266667rem;
}
.news-wrap .time{
  margin-right: .266667rem;
}
.news-wrap .news-cont{
  font-size:14px;
  color:#333;
  text-align: justify;
  line-height: .533333rem;
  margin-bottom: 1.333333rem /* 50/37.5 */;
}
.news-wrap .news-cont p{
  margin: .133333rem 0;
}
.news-wrap .news-img{
  max-width: 100%;
  margin-bottom: .4rem /* 15/37.5 */;
}
.vdo-cont{
  margin: .533333rem auto;
}
.ac-cont img{
  max-width: 100%;
  margin: .266667rem auto;
}
</style>

